<template>
  <div class="user">
    <div class="top-control mb-primary">
      <el-button type="primary" :icon="useRenderIcon(plus)" @click="add"
        >新增</el-button
      >
    </div>
    <div class="my_table">
      <el-table stripe border v-loading="isLoading" :data="tableList">
        <el-table-column label="标题" key="noticeTitle" prop="noticeTitle" />
        <el-table-column
          label="内容"
          prop="noticeContent"
          :show-overflow-tooltip="true"
        >
          <template v-slot="scope">
            <div v-html="scope.row.noticeContent" />
          </template>
        </el-table-column>
        <el-table-column
          label="作者"
          prop="createBy"
          width="100px"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="160"
        >
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="120" />
        <el-table-column label="操作" align="center" width="120px">
          <template v-slot="scope">
            <el-button type="primary" link @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button type="primary" link @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagi flex flex-row-reverse mt-primary">
        <el-pagination
          @current-change="currentChange"
          @size-change="sizeChange"
          v-model:page-size="query.pageSize"
          :page-sizes="[20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
    <newsDialog
      v-model="dialogVisible"
      :is-edit="isEdit"
      :info="currentInfo"
      @get-list="getList"
    />
  </div>
</template>

<script setup lang="ts">
import newsDialog from "./components/newsDialog.vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import plus from "@iconify-icons/ep/plus";
import { parseTime } from "@/utils/utils";
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { NewItem } from "@/api/news/news";
import { delNotice, getNewsList } from "@/api/news";
import { cloneDeep } from "@pureadmin/utils";
import { useUserStoreHook } from "@/store/modules/user";
onMounted(() => {
  getList();
});
// 获取列表
const query = {
  pageNum: 1,
  pageSize: 10,
  createBy: useUserStoreHook().username
};
const currentChange = (val: number) => {
  query.pageNum = val;
  getList();
};
const sizeChange = (val: number) => {
  query.pageSize = val;
  if (Math.floor(total.value / val) < query.pageNum) return;
  getList();
};
const total = ref(0);
const isLoading = ref(false);
const tableList = ref<NewItem[]>([]);
const getList = async () => {
  isLoading.value = true;
  const res = await getNewsList(query);
  isLoading.value = false;
  if (res.code === 200) {
    tableList.value = res.rows;
    total.value = res.total;
  }
};
// 新增
const dialogVisible = ref(false);
const isEdit = ref(false);
const add = () => {
  dialogVisible.value = true;
  isEdit.value = false;
};
// 编辑
const currentInfo = ref<NewItem | null>(null);
const edit = (item: NewItem) => {
  dialogVisible.value = true;
  isEdit.value = true;
  currentInfo.value = cloneDeep(item);
};
// 删除
const del = (item: NewItem) => {
  ElMessageBox.confirm("您确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const res = await delNotice(item.noticeId);
    if (res.code === 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      getList();
    }
  });
};
</script>
